<template>
  <div class="tab_bar">
    <scroll-view scroll-x class="scroll-view" :scroll-left="scrollLeft">
      <view
        class="tab-item"
        v-for="(item, index) in tabs"
        :key="index"
        :class="{ active: modelValue === index }"
        @tap="switchTab(index)"
      >
        <view class="tab-ico">
          <image :src="item.icon" mode="widthFix" />
        </view>
        <view class="tab-item-text">{{ item.name }}</view>
      </view>
    </scroll-view>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';

const props = defineProps({
  tabs: {
    type: Array,
    required: true,
  },
  modelValue: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(['update:modelValue', 'change']);

const scrollLeft = ref(0);

// tab切换
const switchTab = (index) => {
  if (props.modelValue === index) return;

  emit('update:modelValue', index);
  emit('change', { index });

  // 使用 nextTick 确保 DOM 更新后再获取元素
  nextTick(() => {
    const query = uni.createSelectorQuery();
    query
      .selectAll('.tab-item')
      .boundingClientRect(rects => {
        if (!rects || !rects.length) return;
        
        const tabWidth = rects[0].width || 0;
        const screenWidth = uni.getSystemInfoSync().windowWidth;
        // 计算目标tab的位置
        const targetPosition = rects[index]?.left || 0;
        // 计算滚动位置，使目标tab居中
        const scrollPosition = targetPosition - (screenWidth - tabWidth) / 2;

        scrollLeft.value = Math.max(0, scrollPosition);
      })
      .exec();
  });
};
</script>

<style lang="scss" scoped>
.tab_bar {
  background: linear-gradient(90deg, #7881d9 0%, #f0b8ea 100%);
  position: sticky;
  top: 0;
  padding: 15rpx 0 0 0;
  z-index: 100;

  .scroll-view {
    width: 100%;
    padding: 20rpx 0 0 20rpx;
    border-radius: 20rpx 20rpx 0 0;
    // background-color: #f5f5f5;
    white-space: nowrap;
    height: 115rpx;
    // border-bottom: 1rpx solid #f5f5f5;

    .tab-item {
      height: 115rpx;
      line-height: 88rpx;
      display: inline-block;
      padding: 0 30rpx;
      font-size: 28rpx;
      color: #f0f0f0;
      position: relative;

      &.active {
        color: #ffffff;
        font-weight: bold;

        &::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 12rpx solid transparent;
          border-right: 12rpx solid transparent;
          border-bottom: 12rpx solid #ffffff;
          background: none; // 移除原来的背景色
          border-radius: 0; // 移除原来的圆角
        }
      }

      .tab-ico {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60rpx;
        margin-bottom: 8rpx;

        image {
          width: 60rpx;
          height: 60rpx;
        }
      }

      .tab-item-text {
        font-size: 24rpx;
        line-height: 1;
        text-align: center;
      }
    }
  }
}
</style>
